<template>
  <div>
    <el-tabs v-model="active" v-if="name && formConfig.length > 0">
      <el-tab-pane :label="name" name="properties">
        <component :is="(selectNode.type || '').toLowerCase()" :config="selectNode.props"/>
      </el-tab-pane>
      <el-tab-pane label="表单权限设置" name="permissions">
        <form-authority-config />
      </el-tab-pane>
      <el-tab-pane label="操作权限" name="operatePerm"
                   v-if="selectNode.type === 'APPROVAL' || selectNode.type === 'ROOT'">
        <task-operation-config/>
      </el-tab-pane>
    </el-tabs>
    <component :is="(selectNode.type || '').toLowerCase()" v-else :config="selectNode.props"/>
  </div>
</template>

<script>
import { computed, reactive, toRefs } from 'vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'

import Approval from './ApprovalNodeConfig.vue'
import Condition from './ConditionNodeConfig.vue'
import Delay from './DelayNodeConfig.vue'
import Cc from './CcNodeConfig.vue'
import Trigger from './TriggerNodeConfig.vue'
import TaskOperationConfig from './TaskOperationConfig.vue'
import FormAuthorityConfig from './FormAuthorityConfig.vue'
import Root from './RootNodeConfig.vue'

export default {
    name: 'NodeConfig',
    components: {
        Approval,
        Condition,
        Delay,
        Cc,
        Trigger,
        TaskOperationConfig,
        FormAuthorityConfig,
        Root
    },
    setup(props, context) {
        const state = reactive({
            active: 'properties',
        })
        const storesWorkFlowConfig = useWorkFlowConfig()
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const selectNode = computed(() => {
            return workFlowConfig.selectedNode.value
        })
        console.log(selectNode.value)
        const formConfig = computed(() => {
            return workFlowConfig.design.value.formItems
        })
        const name = computed(() => {
            switch (selectNode.value.type) {
                case 'ROOT':
                    return '设置发起人'
                case 'APPROVAL':
                    return '设置审批人'
                case 'CC':
                    return '设置抄送人'
                default:
                    return null
            }
        })
        return {
            ...toRefs(state),
            selectNode,
            formConfig,
            name
        }
    }
}
</script>

<style>

</style>